﻿var activeSubOut = null;
var activeSubIn = null;

var subsIn = new Array();
var subsOut = new Array();


$(document).ready(function () {

    adjustWidth();
    displayPlayers();

    initClick();

});

var initClick = function () {
    $('.subout').click(function () {
        initSubOutClick(this);
    });
    $('.subin').click(function () {
        initSubInClick(this);
    });
    $('#MainContent_confirmSwap').click(function (e) {
        e.preventDefault();
        confirmSwap();
        return false;
    });
}


var initNewClick = function (div) {
    $('.suboutnew').click(function () {
        initSubOutClick(this);
    });
}


var initSubInClick = function (e) {

    var classSelector = $(e).closest('.sub').attr('class');
    var classes = classSelector.split(' ');
    if (classes.length === 3 || classes.length === 4) {
        var playerID = classes[2];
        activeSubIn = playerID;
        if (activeSubOut === null) {
            setActive(activeSubIn);
        }
    }

    var pos = classes[1];

    if (activeSubOut === null) {
        $(".player" + "." + pos).addClass('valid');
        $(".player").not("." + pos).addClass('invalid');
    }

    performSwap();

}

var initSubOutClick = function (e) {
    var classSelector = $(e).closest('.player').attr('class');
    var classes = classSelector.split(' ');
    if (classes.length === 3 || classes.length === 4) {
        var playerID = classes[2];
        activeSubOut = playerID;
        if (activeSubIn === null) {
            setActive(activeSubOut);
        }
    }

    var pos = classes[1];

    if (activeSubIn === null) {
        if (pos === "Keeper") {
            $(".sub.Keeper").addClass('valid');
            $(".sub").not("." + pos).addClass('invalid');
        } else {
            $(".sub").not(".Keeper").addClass('valid');
            $(".sub.Keeper").addClass('invalid');
        }
    }

    performSwap();
}

var setActive = function (a) {
    clearStyle();
    $('.' + a).addClass('swapping');
}

var swapPlayers = function (playerIn, playerOut) {
    var pInDiv = $('.' + playerIn);
    var pOutDiv = $('.' + playerOut);
    var pInClass = $('.' + playerIn).attr('class');
    var pOutClass = $('.' + playerOut).attr('class');
    var pOutClasses = pOutClass.split(' ');

    var pInClasses = pInClass.split(' ');

    var pInPos = pInClasses[1];
    var pOutPos = pOutClasses[1];

    var pInID = pInClasses[2];
    var pOutID = pOutClasses[2];

    var swapDifferentPos = function (div) {

        pInDiv.attr('class', pInClasses[0] + " " + pOutPos);
        pInDiv.addClass(pOutID);
        pOutDiv.remove();

        var shirt = "<div class='playerShirt picked'>" + "12" + "</div>";
        var controls = "<div class='playerControls'><span class='points'>" + 0 + "</span><a><img class='suboutnew' src='../images/design/suboutsmall.png'/></a></div>";
        div.append("<div class='" + pOutClasses[0] + " " + pInPos + " " + pInID + "'>" + shirt + "<span>" + temp + "</span>" + controls + "</div>");
        adjustWidth();
    }

    var swapSamePos = function () {

        $('.' + playerOut + ' > span').text(temp);

        pInDiv.attr('class', pInClasses[0] + " " + pOutPos);
        $('.' + playerOut).attr('class', pOutClasses[0] + " " + pInPos + " " + pInID);
        pInDiv.addClass(pOutID);
    }

    if (isValidSwap(pInPos, pOutPos)) {


        var temp = $('.' + playerIn + ' > span').text();
        $('.' + playerIn + ' > span').text($('.' + playerOut + ' > span').text());

        if (pInPos === pOutPos) {
            swapSamePos();
        } else if (pInPos === "Defender") {
            var defenderDiv = $('#MainContent_defRow');
            swapDifferentPos(defenderDiv);
        } else if (pInPos === "Midfielder") {
            var midfielderDiv = $('#MainContent_midRow');
            swapDifferentPos(midfielderDiv);
        } else if (pInPos === "Forward") {
            var forwardDiv = $('#MainContent_attRow');
            swapDifferentPos(forwardDiv);
        }
        addToSwapList(pOutID, pInID);
    }
    clearStyle();
    initNewClick('.suboutnew');
}

var addToSwapList = function (pOutID, pInID) {
        subsOut.push(pOutID);
        subsIn.push(pInID);
}

var performSwap = function (playerIn, playerOut) {
    if (activeSubOut !== null && activeSubIn !== null) {
        swapPlayers(activeSubIn, activeSubOut);
        activeSubIn = null;
        activeSubOut = null;
    }
}

var confirmSwap = function () {


    if (subsIn.length === subsOut.length) {
        console.log(subsIn.join() + " - " + subsOut.join());
        for (var i = 0; i < subsIn.length; i++) {
            PageMethods.swapPlayers(subsIn[i], subsOut[i]);
            //
        }
    }

    subsIn = [];
    subsOut = [];

}

var isValidSwap = function (playerInPos, playerOutPos) {

    var numOfDefenders = $('.player.Defender').length;
    var numOfMidfielders = $('.player.Midfielder').length;
    var numOfForwards = $('.player.Forward').length;

    if (playerInPos === playerOutPos) {
        return true;
    } else if (playerInPos === "Keeper" || playerOutPos === "Keeper") {
        alert("You can only swap a keeper with a keeper!");
        return false;
    } else if (playerOutPos === "Defender" && numOfDefenders > 4) {
        return true;
    } else if (playerOutPos === "Midfielder" && numOfMidfielders > 3) {
        if (playerInPos === "Defender" && numOfDefenders > 4) {
            alert("Invalid swap");
            return false;
        } else {
            return true;
        }
    } else if (playerOutPos === "Forward" && numOfForwards > 1) {
        if (playerInPos === "Defender" && numOfDefenders > 4) {
            alert("Invalid swap");
            return false;
        } else {
            return true;
        }
    } else {
        alert("Invalid swap");
        return false;
    }

}

var clearStyle = function () {
    $('.swapping').removeClass('swapping');
    $('.valid').removeClass('valid');
    $('.invalid').removeClass('invalid');

}

var adjustWidth = function () {
    var defenderLength = $('.player.Defender').length;

    if (defenderLength != null) {
        $('#MainContent_defRow').css("width", defenderLength * 75);
    }

    var midfielderLength = $('.player.Midfielder').length;
    $('#MainContent_midRow').css("width", midfielderLength * 75);

    var forwardLength = $('.player.Forward').length;
    $('#MainContent_attRow').css("width", forwardLength * 75);
}

var displayPlayers = function () {
    var players = $('.player');

    for (var i = 0; i < players.length; i++) {
        var shirt = "<div class='playerShirt picked'>" + "0" + "</div>";
        var controls = "<div class='playerControls'><a><img class='subout' src='../images/design/suboutsmall.png'/></a></div>";
        players.get(i).innerHTML = shirt + players.get(i).innerHTML + controls;
    }

    var subs = $('.sub');
    for (var i = 0; i < subs.length; i++) {
        var shirt = "<div class='playerShirt picked' style='text-align: center'>" + "0" + "</div>";
        var controls = "<div style='float:left'><a><img class='subin' src='../images/design/subinsmall.png'/></a></div>";
        subs.get(i).innerHTML = controls + shirt + subs.get(i).innerHTML;
    }

    for (var i = 0; i < players.length; i++) {
        var playerDiv = players[i];
        var classSelector = $(playerDiv).attr('class');
        var classes = classSelector.split(' ');
    }

    for (var i = 0; i < subs.length; i++) {
        var subDiv = subs[i];
        var classSelector = $(subDiv).attr('class');
        var subClasses = classSelector.split(' ');
    }
}